El editor de Blogger nos provee de unas casillas para justificar texto o imágenes, sin embargo no siempre resulta bien, es entonces cuando hacemos uso del html.
me preguntaba la forma de añadir un pie de foto o leyenda utilizando html, esta es la respuesta:
Mi imagen

<div align="center"><img src="Url-de-tu-imagen" /></div><div align="center">Tu imagen</div>

Mi imagen

<div align="left"><img src="Url-de-tu-imagen" /></div><div align="left">Tu imagen</div>

Mi imagen

<div align="right"><img src="Url-de-tu-imagen" /></div><div align="right">Tu- imagen</div>

Podemos agregar todo el texto que deseamos, irá ocupando la parte derecha de la imagen hasta completar.

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac elit. Cras tellus leo, sollicitudin a, sagittis eu, vulputate quis"





<p><img src="url-de-tu-imagen" align="left">Aquí el texto...</p>

Podemos agregar todo el texto que deseamos, irá ocupando la parte izquierda de la imagen hasta completar.

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac elit. Cras tellus leo, sollicitudin a, sagittis eu, vulputate quis"





<p><img src="Url-de-tu-imagen" align="right">Aquí el texto...</p>

Antony

Hola! Muy buen truco... Saludos!

Responder
Anónimo

Ehi que onda pues paso por aca a tu blog esta bastante interesante me gusta el diseño y el contenido cuidese !! y buena Vibra...

Responder
Anónimo

Saludos Gema, te invito a unirte a esta gran causa Ecoogler el buscador ecologico Seria bueno que tal como Jmiur y muchos otros Bloggers se unan a esta gran causa.

Nos vemos hasta la proxima.

Responder
Gem@

Hola Antony me alegra que lo veas de interés ;)

Bienvenido eL carajo gracias por comentar :)

Mundo Libre10 gracias por hacerme llegar la noticia, ya mismo me uno a todos en esta causa y por supuesto Ecoogler tendrá una entrada. ;)

Responder
Unknown

hola gema espero que estés disfrutando del viaje (y del descanso!) en el ínterin, una consulta: ¿cómo puedo hacer para que el título de los post en la plantilla mínima tenga el mismo tamaño que el texto del blog y en italic? esto va para mis dos blogs: http://sonsososlosbolsos.blogpsot.com y http://acabadoimperfecto.blogspot.com. Por ahora no he puesto títulos, pero es obvio que tengo que ponerlos!
bicos

Responder
Gem@

S.O.S he visto este comentario ahora mismo sorry...
Si aún no lo solucionaste dirígete a "Fuentes y colores" allí puedes modificar el tipo y tamaño de todas las fuentes del blog ;)

Responder
Anónimo

mas clara y directa, imposible. Felicitaciones Gema

Responder
Gem@



Gracias Jose :)

Responder
Ana Laura

Ahhh, no sé que me pasa con los comentarios, pero no salió... o tal vez estoy siendo impaciente. Esperaré.

Responder
Ana Laura

No salió nomás, ufa. Bueno, lo repito.

Te decía, Gema, que me pareció muy útil este nuevo truquito, muchas gracias, y te preguntaba si existía la posibilidad de hacer algo similar con el alojamiento que provee blogger, o tal vez hacer que la leyenda aparezca al pasar con el mouse por encima de la imagen. No tengo idea si esto es posible, la verdad.

Muchas gracias otra vez.

Responder
Gem@

yz Ana Laura no entiendo eso que dices sobre hacer algo similar con el alojamiento de Blogger.
No hay problemas en añadir el código en el editor de entradas de Blogger, lo que no sé es como hacerlo para que sólo se vea el texto al pasar el mouse. :(

Responder
Ana Laura

Mmmm, me refería a hacer algo similar cuando subimos imágenes por medio de blogger mismo, no cuando agregamos una imagen de otro lado. Realmente entre todo ese codigo que aparece cuando subimos una imagen, no tengo idea donde poner la leyenda de la foto.
Muchas gracias por tu respuesta :)

Responder
Gem@

Hola Ana Laura, para el ejemplo de esta entrada las imágenes se subieron a la misma entrada, es más yo subo todas las imágenes a Blogger.
Es cierto que proporciona mucho código por eso hay que dejar sólo el que nos interesa para la imagen. Mira aquí ;)

Responder
Ana Laura

Genial! Gracias otra vez :)

Responder
Gem@

yz Me alegra que te resultara bien :)

Responder
Fernando Alcalá

gracias gema es muy interesante lo probaré a ver si cumple mi cometido supongo que admitirá la apertura de la fotografía en una nueva pestaña añadiendo la instrucción, y para poner varias fotografías? como debería ser el Html?

Responder
Gem@

Hola Fernando, para añadir varias imágenes es suficiente con incluir el código de la imagen uno seguido del otro. Espero sea de utilidad :)

Responder
Realarmed

Gracias, es lo que buscaba, más preciso imposible.

Responder
Gem@

yz Me alegra que te sirviera Real, pero luego de esta entrada cree otra que ahora mismo no encuentro.
Se trata de añadir

<img src="URL_IMAGEN" style="margin: 5px 0px 5px 5px;float: left; " />

Con eso conseguimos que el texto no quede pegado a la imagen, considerando que las medidas van en este orden: arriba (5px), derecha (0px ), debajo (5px ), izquierda (5px ).
Puedes aumentar o disminuir según veas ;)

Responder
Anónimo

gracias por este tuto!!! tan elemental y esencial. Te amo

Responder
Gem@

:: Hola anónimo si el tutorial te fue útil lo que digo en el comentario 19 lo será más :)

Responder
miguel f.m.

hola gema antes de nada muchas gracias por tu inmensa ayuda.
Al grano. Tengo unas fotos y pongo después de URL
style="height: 100px; width: 100px;"
pero al añadir la separación del subtítulo me sale de pena...
¿alguna sugerencia? porque está claro que no lo hago bien. He probado dentro de "style" después del tamaño y entre "" y otras variantes.

También me interesa aprender a poner las fotos en la misma línea. También he probado , pero nada.

un saludo

PD- es para el blog de un amigo
el mio mfmanero.blogspot.com

Responder
Gem@

:: Hola Miguel tendría que ver un ejemplo online para saber que se está haciendo mal.

Las imágenes en línea se añaden añadiendo el código de la imagen uno junto a otro en la misma línea y separado de un espacio :)

Responder
miguel f.m.

gracias Gema por tu rápida respuesta...
sigo practicando pero con escasos resultados.
mi blog de pruebas -la entrada hola2-
pruebasdeblogmiguel.blogspot.com/

el blog en cuestión
www.nocreditpro.blogspot.com/

como ves las ventanas no son iguales y como van a añadir más me pidieron socorro y yo a tí.
Con tu ejemplo consigo poner dos en linea pero no ponerle título a cada uno por separado.
Como ves en mi blog de pruebas si que funciona con "Añadir leyenda" y situándolo a la izda, no centrado porque los sitúa en lineas diferentes.


gracias por dedicar un rato de tu tiempo a los torpes.
Un saludo

Responder
Gem@

:: Hola Miguel, cuando se trata de añadir más de un pie de foto o cualquier texto y que se muestre donde uno quiera debemos indicar a qué distancia se mostrará el texto y cuidar que coincida centrado con la imagen superior.
Hice un ejemplo en el siguiente blog:
http://ejemplosdecualquiercosa.blogspot.com/
Como verás se ha centrado el texto "Antes" y "Después" y se hizo añadiendo unos margenes.
El primer ejemplo dice margin: 5px 15px 0px 110px los valores los añadimos de forma que se adjudican en el siguiente orden arriba - derecha - abajo- izquierda :D

Responder
miguel f.m.

gracias nuevamente por tu interés. Te debo una...

creo entender tu propuesta y la he puesto en el blog de pruebas.
Pensé que había alguna manera de asociar el título a la foto de manera que al adjudicar un tamaño cualquiera a la foto, el título se posicionara respecto nuevo tamaño de la foto.
lo de poner el tamaño era para que por descuido no salgan diferentes de tamaño.

img src="http://imagen.jpg" style="height: 100px; width: 100px;"
o el tamaño que sea

según entiendo, y es lo que he hecho, el título va en una línea independiente y hay que posicionarlo "manualmente"

No entiendo lo de
margin: 5px 15px 0px 110px
dado que si va en una línea independiente, también sería correcto en mi caso
margin: 0px 0px 0px 260px
margin: 0px 0px 0px 50px

si vas muy liada, que seguro, no es necesario que respondas, ya me has ayudado bastante, a no ser que mi explicación sea errónea del todo, que también puede ser...
un saludo

Responder
Fernando Puesán

www.enrojoysinrodeo.com

quiero mejorar la imagen de mi blog, que me recomiendas?

Responder
Gem@

:: miguel fernández manero no he respondido porque no había visto el comentario si aún no has resuelto el problema házmelo saber :)

:: Fernando Puesán no puedo recomendarte nada porque en mi opinión el blog es algo personal, nadie mejor que uno para saber lo que se espera del blog :D

Responder
Unknown

Se agredece, me estaba volviendo loco con los pié de página xD

Responder
Gem@

:: A veces hacemos complicado lo sencillo Tatoh :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top